Dependencies upgrade and module template sync #601
Conversation
…me missing configurations
|
🚨 Potential security issues detected. Learn more about Socket for GitHub ↗︎ To accept the risk, merge this PR and you will not be notified again.
Next stepsWhat is new author?A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package. Scrutinize new collaborator additions to packages because they now have the ability to publish code into your dependency tree. Packages should avoid frequent or unnecessary additions or changes to publishing rights. What is shell access?This module accesses the system shell. Accessing the system shell increases the risk of executing arbitrary code. Packages should avoid accessing the shell which can reduce portability, and make it easier for malicious shell access to be introduced. What is network access?This module accesses the network. Packages should remove all network access that is functionally unnecessary. Consumers should audit network access to ensure legitimate use. What is a deprecated package?The maintainer of the package marked it as deprecated. This could indicate that a single version should not be used, or that the package is no longer maintained and any new vulnerabilities will not be fixed. Research the state of the package and determine if there are non-deprecated versions that can be used, or if it should be replaced with a new, supported solution. What is an install script?Install scripts are run when the package is installed. The majority of malware in npm is hidden in install scripts. Packages should not be running non-essential scripts during install and there are often solutions to problems people solve with install scripts that can be run at publish time instead. Take a deeper look at the dependencyTake a moment to review the security alert above. Review the linked package source code to understand the potential risk. Ensure the package is not malicious before proceeding. If you're unsure how to proceed, reach out to your security team or ask the Socket team for help at support [AT] socket [DOT] dev. Remove the packageIf you happen to install a dependency that Socket reports as Known Malware you should immediately remove it and select a different dependency. For other alert types, you may may wish to investigate alternative packages or consider if there are other ways to mitigate the specific risk posed by the dependency. Mark a package as acceptable riskTo ignore an alert, reply with a comment starting with
|
| "@storybook/addon-actions", | ||
| "@storybook/react-webpack5", | ||
| "babel-loader", | ||
| "dependency-tree", | ||
| "eslint-plugin-node", | ||
| "sass", | ||
| "webpack", |
There was a problem hiding this comment.
These packages are listed as incorrectly unused dependencies related to storybook when running yarn lint this resolves that
| "@yarnpkg/core", | ||
| "@yarnpkg/cli", | ||
| "clipanion", | ||
| "@yarnpkg/fslib" |
There was a problem hiding this comment.
These packages are listed as missing dependencies when they shouldn't be required and are also not listed in the module template .depcheckrc.json file https://github.com/MetaMask/metamask-module-template/blob/main/.depcheckrc.json
There was a problem hiding this comment.
Resolved by @mcmire comment here https://github.com/MetaMask/design-tokens/pull/600/files#r1474934441
There was a problem hiding this comment.
Ah! I see what you mean now. You're right, they aren't in the module template. I notice based on the changelog that depcheck has been updated in recent months, so perhaps one of the updates caused a change in behavior. I'll try bumping it on the module template to confirm. Regardless, this is still right :)
| brandColor, | ||
| } from './js'; | ||
| export type { Theme } from './js'; | ||
| export { colors, typography, lightTheme, darkTheme, brandColor } from './js'; |
There was a problem hiding this comment.
lint fixes running yarn lint:fix
georgewrmarshall
changed the title
georgewrmarshall
changed the title
georgewrmarshall
changed the title
georgewrmarshall
added
the
team-design-system
|
Socket dev security issues should be mitigated by lavamoat as they are all supply chain issues 
|
| "@yarnpkg/core", | ||
| "@yarnpkg/cli", | ||
| "clipanion", | ||
| "@yarnpkg/fslib" |
There was a problem hiding this comment.
Ah! I see what you mean now. You're right, they aren't in the module template. I notice based on the changelog that depcheck has been updated in recent months, so perhaps one of the updates caused a change in behavior. I'll try bumping it on the module template to confirm. Regardless, this is still right :)
| "engines": { | ||
| "node": "^16.20.0" | ||
| "node": "^18.18 || >=20" |
There was a problem hiding this comment.
Note that this also bumps the minimum required version of Node from 16 to 18. That's fine but I just wanted to call it out.
There was a problem hiding this comment.
Great call out! Projects that are currently using the design tokens package and Node v16 will not be compatible with it after this change. So then this would qualify as a breaking change under SemVer guidelines? Therefore, the release incorporating this PR will necessitate a major version increment.
This should be acceptable given that our three primary consumers of this package have the following Node versions:
- Mobile: "node": "~18.18.2"
- Extension: "node": ">= 18"
- Portfolio: "node": ">=20.0.0"
There was a problem hiding this comment.
Yes, exactly. This will necessitate a major version increment.
…g get-release-version as it's not needed as per suggestion
| "dist/", | ||
| "src/css/" |
There was a problem hiding this comment.
Fixed by #609
## **Description** This PR updates @metamask/design-tokens package to v2. There are not visual changes but upgrade to major version is due to node version upgrade see details in PR here: MetaMask/design-tokens#601 ## **Related issues** Fixes: N/A ## **Manual testing steps** 1. Pull this branch 2. Run extension locally `yarn start` 3. See that design token colors and typography work as expected ## **Screenshots/Recordings** ### **Before** Screenshot below shows design tokens stylesheet being loaded <img width="1510" alt="Screenshot 2024-02-09 at 2 10 22 PM" src="https://github.com/MetaMask/metamask-extension/assets/8112138/fe91ab79-783e-463b-a77e-20810a4ce69c"> ### **After** Screenshot below shows design tokens stylesheet being loaded as expected after package update <img width="1511" alt="Screenshot 2024-02-09 at 1 09 08 PM" src="https://github.com/MetaMask/metamask-extension/assets/8112138/321ab24f-659d-4bfa-a3d8-f57895658145"> ## **Pre-merge author checklist** - [x] I’ve followed [MetaMask Coding Standards](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/CODING_GUIDELINES.md). - [x] I've clearly explained what problem this PR is solving and how it is solved. - [x] I've linked related issues - [x] I've included manual testing steps - [x] I've included screenshots/recordings if applicable - [x] I’ve included tests if applicable - [x] I’ve documented my code using [JSDoc](https://jsdoc.app/) format if applicable - [x] I’ve applied the right labels on the PR (see [labeling guidelines](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/LABELING_GUIDELINES.md)). Not required for external contributors. - [x] I’ve properly set the pull request status: - [ ] In case it's not yet "ready for review", I've set it to "draft". - [x] In case it's "ready for review", I've changed it from "draft" to "non-draft". ## **Pre-merge reviewer checklist** - [ ] I've manually tested the PR (e.g. pull and build branch, run the app, test code being changed). - [ ] I confirm that this PR addresses all acceptance criteria described in the ticket it closes and includes the necessary testing evidence such as recordings and or screenshots.
Description
This PR aims to update the design token package, which was originally generated from the metamask-module-template. Over time, the package has become outdated and incompatible with mobile and portfolio due to dependency issues, particularly with node versions. This PR addresses these issues by updating the dependencies and aligning the package with the most recent module template using the template sync package.
The upgrade to yarn version 3 also necessitated changes to the GitHub workflow files, which were updated to align with the module template. This alignment should enhance the automation of our releases. Due to the upgraded node and yarn versions, this PR includes numerous other dependency updates, file changes, lint fixes, and the inclusion of config files.
Fixes: #597
Manual Testing Steps
Because mobile and portfolio are using yarn v1 and the design tokens is using v3. It's quite hard to test using yarn link. But if you pull this branch and try to use yarn link on a project that use yarn 3 it will work like the module template.
yarn && yarn buildyarn link ../path/to/design-tokensbrandColorin to theindex.tsfileOther smoke tests
yarn storybookScreencasts/Screenshots
Screencast below shows yarn link version of the design-tokens to the module-template as a test to ensure that the
brandColorobject in thev1.13release is importing and working as intendedafter1080.mov